<template>
	<view class="page-cart" style="padding-bottom: 190rpx;">
		
		<view class="u-flex u-f-jsb p12">
			<view>
				<view class="fz16 u-font-bold">等待支付，剩余 
				<u-count-down :show-hours="false" :timestamp="timestamp"></u-count-down>
				</view>
				<view class="fz12 mt6">超时未支付订单将自动取消</view>
			</view>
		</view>
		<view class="p15 bg-white brs10"
			@click="toPage('/pages/user/address/index?source=order')">
			<view class="u-flex">
				<u-icon name="map-fill" color="#000" size="40"></u-icon>
				<view class="u-flex u-f-jsb u-f1 pl10">
					<view v-if="addressInfo.id">
						<view class="fz15">{{addressInfo.name}}<span class="ml10">{{addressInfo.mobile}}</span></view>

						<view class="fz12">
							{{addressInfo.areaName}}
							{{addressInfo.detailAddress}}
						</view>
					</view>
					<view v-else>
						<view class="fz14">请选择地址</view>
					</view>
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="p15 mt15 pt0 bg-white brs10">
			<view class="">
				<view @click="toInfo(item)" class="bg-white brs10 mb20" v-for="(item,index) in info.items"
					:key="index">
					<view class="u-flex" style="align-items: flex-start;">
						<image :src="item.picUrl" style="width: 200rpx;height: 200rpx;" mode="aspectFill"></image>
						<view class="pl12 u-f1">
							<view class="fz15 u-flex u-f-jsb u-line-2">
								{{item.spuName}}
							</view>
							
							<view class="c8 mt10" v-if="item.skuName">{{item.skuName}}</view>
							
							<view class="fz14 u-flex u-f-jsb u-font-bold mt15">
								￥{{item.price}}
								<span>x{{item.count}}</span>
							</view>
						
							
						</view>
					</view>
				
				
				
				
				</view>
			</view>
			<view class="u-flex u-f-jsb fz14 mt15">
				<span style="color: #7B7B7B;">商品总价</span>￥{{info.price.totalPrice || 0}}
			</view>
			
			<view class="u-flex u-f-jsb fz14 mt15">
				<span style="color: #7B7B7B;">运费</span>￥{{info.price.deliveryPrice || 0}}
			</view>
			<view class="u-flex u-f-jsb fz14 mt15">
				<span style="color: #7B7B7B;">优惠</span>
				<view class="f24 theme-price" @click="toCoupon">
					
						<view
							v-if="couponInfo&&couponInfo.discountPrice">-￥{{couponInfo.discountPrice}}<u-icon name="arrow-right" color="#999" size="24"></u-icon></view>
						<text v-else class="c9">暂无优惠</text></view>
				<!-- <span v-else style="color: #7B7B7B;">无优惠券可用</span> -->
			</view>
			<view class="u-flex u-f-jsb fz14 mt15" v-if="info.price.vipPrice">
				<span style="color: #7B7B7B;">会员折扣</span>-￥{{info.price.vipPrice || 0}}
			</view>
			<view class="u-flex u-f-jsb fz14 mt15">
				<span style="color: #7B7B7B;">备注</span>
				<span>无备注<u-icon name="arrow-right" color="#999" size="24"></u-icon></span>
			</view>
			<view class="bt mt15 pt15" style="text-align: right;">
				<!-- 共计2件 -->
				合计<span class="fz16 u-font-bold">￥{{info.price.payPrice}}</span>
			</view>
			<view style="background: rgba(25,41,28,0.05);" class="brs3 p12 mt20">
				<view class="fz14 u-font-bold">订单奖励</view>
				<view class="u-flex u-f-jsb fz13 mt10">
					获得积分<span class="u-font-bold" style="color: #70B52C;">{{info.givePoint}}</span>
				</view>
			</view>
			<view class="mt18">
				<view class="fz14 u-font-bold">支付方式</view>
				<view class="u-flex u-f-jsb mt15" @click="pay_type=0">
					<view class="u-flex">
						<span class="fz13 u-font-bold">微信支付</span>
					</view>
					<view>
						<u-icon v-if="pay_type==0" name="checkmark-circle-fill" color="#70B52C" size="32"></u-icon>
						<u-icon v-else name="checkmark-circle" color="#70B52C" size="32"></u-icon>
					</view>
				</view>
				<view class="u-flex u-f-jsb mt10" @click="selectBalance">
					<view class="u-flex">
						<span class="fz13 u-font-bold">购物金</span>
						<span class="c9 ml5">可使用购物金：{{userInfo.balance}}元</span>
					</view>
					<view>
						<u-icon v-if="pay_type==1" name="checkmark-circle-fill" color="#70B52C" size="32"></u-icon>
						<u-icon v-else name="checkmark-circle" :color="(userInfo.balance>info.price.payPrice)?'#70B52C':'#ddd'" size="32"></u-icon>
					</view>
				</view>
			</view>
		</view>
		

		<view class="module-btn u-flex u-f-jsb bg-white p15">
			<view class="fz16">应付：<span style="color: #FF563B;" class="fz24">￥{{info.price.payPrice || 0}}</span>
			<span v-if="info.usedPoint" style="color: #FF563B;" class="fz24">+{{info.usedPoint}}积分</span>
			</view>
			<view class="btn" @click="pay">提交支付</view>
		</view>

		<u-popup v-model="showCoupon" mode="bottom" :closeable="true">
			<view style="padding-top: 30rpx;">
				<view class="fz16 u-font-bold mb20 pl15">选择优惠券</view>
				<scroll-view :scroll-y="true" style="height:800rpx;">
					<view class="module-coupon">
						<view class="item mb15" v-for="(item, index) in coupon_list" :key="index">
							<view class="coupon-item">
								<!--装饰用的小圆-->

								<view class="u-flex u-f-jsb">
									<view class="info">{{item.coupon_type.text}}</view>
									<view class="fz32 u-font-bold c255">
										<template v-if=" item.coupon_type.value == 10 ">
											<span>￥{{ item.reduce_price*1 }}</span>
										</template>
										<template v-if="item.coupon_type.value == 20 ">
											<span>{{ item.discount }}折</span>
										</template>
									</view>
								</view>
								<view class="operation d-b-c w-b">
									<view class="fz16 u-font-bold c255">
										{{item.min_price>0?'满'+item.min_price*1+'元可用':'无门槛'}}
									</view>
									<view class="u-flex u-f-jsb">
										<view class="f24 time">
											<template v-if="item.expire_type ==10">
												有效期：领取{{ item.expire_day }}天内有效
											</template>
											<template v-if="item.expire_type ==20">
												有效期：{{item.start_time.text}}至{{item.end_time.text}}
											</template>
										</view>

										<view class="btns d-c-c">
											<button type="default" class="btn-revice" @click="selectCoupon(item)">
												去使用
											</button>
										</view>
									</view>

								</view>
							</view>
						</view>
						<view class="btn-none mt20" @click="selectCoupon('')">暂不使用</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-picker @confirm="selectConfirm" :range="showList" range-key="name" v-model="showType"
			mode="selector"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: 30*60,
				sysInfo: getApp().globalData.sysInfo,
				post: {
					cartIds: '',
					deliveryTemplateId: '',
					couponId: '',
					addressId: '',
					remark: '',
				},
				orderId: 0,
				addressInfo: {},
				deliveryInfo: {},
				couponInfo: {},
				info: {},
				pay_type:0,
				userInfo:{},
				showDialog: false,
				articleStatus: 0,
				dialogContent: '',
				dialogTitle: ''
			}
		},
		onLoad(e) {
			// e.cartIds=15
			if (e.cartIds) {
				this.post.cartIds = e.cartIds
			}
			if (e.exchangeCode) {
				this.post.exchangeCode = e.exchangeCode

			}
			if (e.activityId) {
				this.post.activityId = e.activityId

			}
			if(e.compositionId){
				this.post.compositionId=e.compositionId
				this.post.count=1
			}

				this.$api.memberInfo({}, res => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				})
			this.getAddress()
			this.initData()
		},
		onShow() {
			var that = this;
			wx.getStorage({ //获取地址修改
				key: 'selectedAddress',
				success: function(res) {
					if (res.data) {
						that.addressInfo = JSON.parse(res.data);
						that.post.addressId = that.addressInfo.id
						that.getInfo();
						wx.removeStorage({
							key: "selectedAddress"
						})
					}

				}
			});

			wx.getStorage({ //获取优惠卡
				key: 'selectedCoupon',
				success: function(res) {
					if (res.data) {
						that.couponInfo = JSON.parse(res.data);
						that.post.couponId = that.couponInfo.id;
						that.getInfo();
						wx.removeStorage({
							key: "selectedCoupon"
						})

					}

				}
			});
			if (uni.getStorageSync('noUseCoupon')) {
				that.couponInfo = {};
				that.post.couponId = '';
				that.getInfo();
			}
			wx.getStorage({ //获取快递公司
				key: 'selectedDelivery',
				success: function(res) {
					if (res.data) {
						that.deliveryInfo = JSON.parse(res.data);
						that.post.deliveryTemplateId = that.deliveryInfo.id

						that.getInfo();
						wx.removeStorage({
							key: "selectedDelivery"
						})
					}

				}
			});
		},
		computed: {},
		methods: {
			selectBalance(){
				if(this.userInfo.balance<this.info.price.payPrice){
					return
				}
				this.pay_type=1
			},
			toDelivery() {
				// if(!this.info.price.deliveryPrice){
				// 	return
				// }
				uni.navigateTo({
					url: '/pages/my/delivery/list'
				})
			},
			initData() {




				this.$api.expressTemplate({}, res => {
					if (res.code == 200) {

						this.post.deliveryTemplateId = res.data[0].id
						this.deliveryInfo = res.data[0]
						this.getInfo();
					}
				})

				// this.$api.articleDetail({
				// 	id: 20
				// }, res => {
				// 	if (res.code == 200) {

				// 		this.dialogContent = res.data.content;
				// 		this.dialogTitle = res.data.title;
				// 		this.articleStatus = res.data.status;
				// 	}
				// })
			},
			getAddress() {
				var that = this;
				that.$api.addressGetDefault({}, res => {
					if (res.code == 200) {
						if (res.data) {
							that.post.addressId = res.data.id
							that.addressInfo = res.data
						}
					}
				})

			},
			toBooking() {
				if (this.articleStatus == 1) {
					this.pay()
				} else {
					this.showDialog = true;
				}
			},
			toCoupon() {
				if (!this.info.coupons || this.info.coupons.length <= 0) {
					uni.showToast({
						title: '暂无可用优惠券！',
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: '/pages/user/coupon/index?data=' + JSON.stringify(this.info.coupons)
				})
			},
			pay: function() {

				var that = this;

				// 测试 QRj9PYYs8r8HQSLyQ2sAmcHzkLASVhMU6Tv6iiGCE2U
				// 正式 iiUbVTSF8I52ilWNM7IG7o9Z8Qex74kK695rO7nzAh8
				that.showDialog = false;
				let post=that.post
				if(that.pay_type==1){
					post.isUseWallet=true
				}
				that.$api.orderCreate(post, res => {
					if (res.code == 200) {
						let info = res.data
						
						
							if (info.payStatus) {
						
								that.$common.successToShow('支付成功', ress => {
									uni.redirectTo({
										url: '/pages/user/order/index'
									})
								})
							} else {
						
								that.toWxPay(info.payOrderId)
								that.orderId = info.id
						
							}
						// uni.requestSubscribeMessage({
						// 	tmplIds: ['iiUbVTSF8I52ilWNM7IG7o9Z8Qex74kK695rO7nzAh8'],
						// 	complete(res) {
						// 		that.$api.messageRemind({
						// 			bizType: 4,
						// 			bizId: info.id
						// 		}, res => {
						// 			if (info.payStatus) {

						// 				that.$common.successToShow('支付成功', ress => {
						// 					uni.redirectTo({
						// 						url: '/pages/orderList/orderList'
						// 					})
						// 				})
						// 			} else {

						// 				that.toWxPay(info.payOrderId)
						// 				that.orderId = info.id

						// 			}
						// 		})
						// 	}
						// })
					} else {

						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			// 支付
			toWxPay(id) {
				uni.showLoading()
				this.$api.orderPay({
					id: id
				}, res => {
					uni.hideLoading()
					if (res.code == 200) {


						let info = JSON.parse(res.data.displayContent)
						// 唤起微信支付。
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timeStamp,
							nonceStr: info.nonceStr,
							package: info.packageValue,
							signType: info.paySign,
							paySign: info.paySign,
							success: (res) => {
								this.$db.set("isNewUser", false)
								this.$common.successToShow('支付成功', ress => {
									uni.redirectTo({
										url: '/pages/user/order/index'
									})
								})
							},
							fail: (err) => {

								if (this.post.exchangeCode || this.post.activityId) {

									this.closeOrder()
								} else {

									uni.redirectTo({
										url: '/pages/user/order/index'
									})
								}
							}
						});

					} else {
						this.$common.errorToShow(res.message)
					}
				})
			},
			closeOrder() {

				this.$api.orderCancel({
					id: this.orderId
				}, res => {
					if (res.code == 200) {
						uni.navigateBack()
					} else {
						uni.navigateBack()
						this.$common.errorToShow(res.message)
					}
				})
			},
			getInfo: function() {
				var that = this;
				that.$api.orderSettlement(that.post, res => {
					if (res.code == 200) {
						that.info = res.data;
						if (uni.getStorageSync('noUseCoupon')) {
							wx.removeStorage({
								key: "noUseCoupon"
							})
							return
						}
						if (!that.couponInfo.id && res.data.coupons.length > 0) {
							that.couponInfo = res.data.coupons.sort(that.sortCompare('discountPrice'))[0]
							that.post.couponId = that.couponInfo.id
							that.getInfo()
						}
					} else {

						this.$common.errorToShow(res.message, ress => {
							// uni.navigateBack()
						})
					}
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.module-btn {
		position: fixed;
		bottom: 0;
		padding-bottom: 50rpx;
		left: 0;
		right: 0;
		z-index: 10;

		.btn {
			background: #FF0000;
			height: 80upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 256rpx;background: #70B52C;
border-radius: 16rpx;
			text-align: center;
		}
	}

	.module-coupon {
		padding: 0 40rpx;

		.item {
			background: url('https://hscc.zhiyunapi.com/wx/image/bg-coupon.png') no-repeat top center;
			background-size: 100% 100%;
			width: 100%;
			margin: 0 auto;

			.coupon-item {
				padding: 30rpx 60rpx;
			}

			.info {
				background: #FFFFFF;
				border-radius: 50rpx;
				font-size: 22rpx;
				display: inline-block;
				color: #E74F44;
				padding: 6rpx 20rpx;
			}

			.time {

				font-size: 22rpx;
				color: #fff;
			}

			.btn-revice {
				background: #FFFFFF;
				border-radius: 50rpx;
				font-size: 26rpx;
				display: inline-block;
				color: #E74F44;

				padding: 0rpx 50rpx;

			}
		}

		.btn-none {
			background: #bbb;
			border-radius: 10rpx;
			font-size: 28rpx;
			width: 100%;
			text-align: center;
			color: #fff;
			padding: 25rpx 50rpx;
		}
	}
</style>